<template>
  <div>
    <BehaviorItem
        v-for="(item, index) in contentList"
        :key="index"
        :content="item"
        v-model="selectedValues[index]"
    />
  </div>
</template>

<script>
// import BehaviorItem from './BehaviorItem.vue';
import BehaviorItem from "@/views/components/BehaviorItem.vue";

export default {
  name: 'BehaviorList',
  components: {
    BehaviorItem
  },
  props: {
    contentList: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      required: true
    }
  },
  computed: {
    selectedValues: {
      get() {
        return this.value;
      },
      set(newValues) {
        this.$emit('input', newValues);
      }
    }
  },
  watch: {
    contentList(newVal) {
      if (newVal.length !== this.selectedValues.length) {
        this.selectedValues = Array(newVal.length).fill(null);
      }
    }
  },
  created() {
    if (this.contentList.length !== this.selectedValues.length) {
      this.selectedValues = Array(this.contentList.length).fill(null);
    }
  }
};
</script>
